<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>jWidget—TabView 切换</title>
<style type="text/css">
/* reset */
body, div, dl, dt, dd, ul, ol, li{padding:0; margin:0;}
img, button, input{border:0;}
input, label, select, option, textarea, button, legend{font:12px/18px Verdana, Simsun, Helvetica, Arial, sans-serif;}
table{border-collapse:collapse; border-spacing:0; font:12px/18px Verdana, Simsun, Helvetica, Arial, sans-serif;}
ul{list-style:none;}
body{background-color:#FFFFFF;font:12px/18px Verdana, Simsun, Helvetica, Arial, sans-serif; color:#333333; text-align:left;}
fieldset{ margin:14px; padding:14px; float:left;clear:both}
/* link */
a{color:#686868;}
a:link, a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
.hot{color:#cd0000;}
a.hot:link, a.hot:visited{text-decoration:underline;}
a.hot:hover, a.hot:active{text-decoration:none;}

dt.on span {background-position:208px -209px;}
dt span {background-position:210px -231px;border:1px solid #FFFFFF;color:#808080;display:block;overflow:hidden;background-image:url(images/tab_bg_1.png);background-repeat:no-repeat;}
dt span b{ color:#F60;}
dl {border:1px solid #DDDDDD;height:228px;overflow:hidden;width:228px;}
dt {background-position:0 -4px;	background-repeat:repeat-x;	border-bottom:1px solid #DDDDDD;cursor:pointer;height:25px;line-height:25px;	background-image:url(images/tab_bg_1.png)}


/* theme */
.theme{clear:both; height:340px; margin-bottom:10px;}
.theme_tab{height:50px;}
.theme_tab li{float:left;}
.theme_tab li a{display:block; width:190px; height:50px;}
.theme_show{position:relative; height:290px;}
.theme_show li{float:left;}
.theme_tab li a.theme_tab1{background:url(images/tab_1-1.jpg) no-repeat;}
.theme_tab li a.theme_tab1:hover,
.theme_tab .on .theme_tab1{background:url(images/tab_1-1.jpg) no-repeat 0 -50px;}
#zhuti_con_1{background:url(images/tab_2-1.jpg) no-repeat;}
.theme_tab li a.theme_tab2{background:url(images/tab_1-2.jpg) no-repeat;}
.theme_tab li a.theme_tab2:hover,
.theme_tab .on .theme_tab2{background:url(images/tab_1-2.jpg) no-repeat 0 -50px;}
#zhuti_con_2{background:url(images/tab_2-2.jpg) no-repeat;}
.theme_tab li a.theme_tab3{background:url(images/tab_1-3.jpg) no-repeat;}
.theme_tab li a.theme_tab3:hover,
.theme_tab .on .theme_tab3{background:url(images/tab_1-3.jpg) no-repeat 0 -50px;}
#zhuti_con_3{background:url(images/tab_2-3.jpg) no-repeat;}
.theme_tab li a.theme_tab4{background:url(images/tab_1-4.jpg) no-repeat;}
.theme_tab li a.theme_tab4:hover,
.theme_tab .on .theme_tab4{background:url(images/tab_1-4.jpg) no-repeat 0 -50px;}
#zhuti_con_4{background:url(images/tab_2-4.jpg) no-repeat;}


/* normal */
.wrap{margin-bottom:10px;}
.detail{background-color:#FFFFFF; border:1px solid #dddddd; border-width:0 1px; zoom:1; min-height:10px; }
.detail:after{content:"."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.normal_list li{background:url(images/bg_vipshop.png) no-repeat -975px -204px; padding-left:10px;}
.keep{width:100%; overflow:hidden; word-break:keep-all; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis;}
/* pic_loading */
.loading_58_58{background:center url(images/loading_58_58.gif) no-repeat}

.shop_tab{background:url(images/bg_vipshop.png) no-repeat 0 -120px; height:33px; padding-top:5px;}
.shop_tab ul{float:right; margin-right:5px;}
.shop_tab ul li{float:left; width:82px; margin-left:-1px; line-height:33px; display:inline; cursor:default}
.shop_tab ul li a{display:block; background:url(images/bg_vipshop.png) no-repeat -440px -320px; width:82px; text-align:center; text-decoration:none; color:#333333;}
.shop_tab ul .tab_on a,
.shop_tab ul li a:hover{background:url(images/bg_vipshop.png) no-repeat -440px -280px; border-left:none; position:relative; font-weight:700;}
.shop_tab ul #tab_first{margin-left:0;}

#sale .detail{border-color:#ffa9a9; border-width:0 2px;}
#sale .bottom{background-position:0 -180px;}
.content .bottom{background:url(images/bg_vipshop.png) no-repeat 0 -560px; height:10px; font-size:0; line-height:0;}

.shop_show{zoom:1; min-height:100px;}
.shop_show li{float:left; width:144px; margin:5px 0 5px 6px; display:inline;}
.shop_show li a{float:left; width:126px; height:180px; overflow:hidden; padding:8px; border:1px solid #ffffff;}
.shop_show li a:hover{background-color:#fff7e7; border-color:#ffe5c6; text-decoration:none;}
.shop_show li a img{background:#fff;border:1px solid #dddddd;}
.shop_show li a span{display:block; clear:both;}
.shop_show li a .price{color:#888888;}
.shop_show li a .keep{display:block; font-weight:normal;}
.content {float:right;width:760px;}
</style>
</head>
<body>
<h1>
    <center>
        jWidget—TabView 切换&nbsp;&nbsp;&nbsp;&nbsp;<a href="jwidget-slide.html" style="text-decoration:underline">Slide轮播</a>
    </center>
</h1>
<fieldset>
    <legend>Tab demo 1</legend>
 	<div class="theme" id="theme">
        <ul class="theme_tab" id="theme_nav">
            <li id="zhuti_title_1" ><a href="http://act.vip.qq.com/" target="_blank" class="theme_tab1"></a></li>
            <li id="zhuti_title_2" ><a href="http://act.vip.qq.com/2009/vipshop/white/" target="_blank" class="theme_tab2"></a></li>
            <li id="zhuti_title_3" ><a href="http://act.vip.qq.com/2009/astro/libra.html" target="_blank" class="theme_tab3"></a></li>
            <li id="zhuti_title_4" ><a href="http://act.vip.qq.com/2009/vipshop/paoxie/" target="_blank" class="theme_tab4"></a></li>
        </ul>
        <span id="theme_panel">
            <ul id="zhuti_con_1" style="display:none" class="theme_show"></ul>
            <ul id="zhuti_con_2" style="display:none" class="theme_show"></ul>
            <ul id="zhuti_con_3" class="theme_show"></ul>
            <ul id="zhuti_con_4" style="display:none" class="theme_show"></ul>
        </span>
    </div>
</fieldset>    

<fieldset>
    <legend>Tab demo 2 
    </legend><div class="content">
        <div id="sale" class="wrap">
            <div class="shop_tab">
                <ul id="danpin1_nav">
                    <li><a>最热推荐</a></li>
                    <li><a>送Q币</a></li>
                </ul>
            </div>
            <div class="detail" id="danpin1_panel"> 
                <ul class="shop_show" style="display:none">
                    <li>
                        <a href="{url}" target="_blank"><img width="120" height="120" src="images/tab_4-1.jpg"/>
                        <span class=""><strong class="keep">{recmdRegName}</strong></span>
                        <span class="price">市场价:<del>￥534</del></span>
                        <span>会员价:<strong class="hot">￥34</strong></span></a>
                    </li> 
                    <li>
                        <a href="{url}" target="_blank"><img width="120" height="120" src="images/tab_4-2.jpg"/>
                        <span class=""><strong class="keep">{recmdRegName}</strong></span>
                        <span class="price">市场价:<del>￥345</del></span>
                        <span>会员价:<strong class="hot">￥53</strong></span></a>
                    </li> 
                    <li>
                        <a href="{url}" target="_blank"><img width="120" height="120" src="images/tab_4-3.jpg" />
                        <span class=""><strong class="keep">353453</strong></span>
                        <span class="price">市场价:<del>￥53345</del></span>
                        <span>会员价:<strong class="hot">￥354</strong></span></a>
                    </li> 
                    <li>
                        <a href="{url}" target="_blank"><img width="120" height="120" src="images/tab_4-2.jpg"/>
                        <span class=""><strong class="keep">{recmdRegName}</strong></span>
                        <span class="price">市场价:<del>￥345</del></span>
                        <span>会员价:<strong class="hot">￥53</strong></span></a>
                    </li> 
                    <li>
                        <a href="{url}" target="_blank"><img width="120" height="120" src="images/tab_4-1.jpg" />
                        <span class=""><strong class="keep">353453</strong></span>
                        <span class="price">市场价:<del>￥53345</del></span>
                        <span>会员价:<strong class="hot">￥354</strong></span></a>
                    </li> 
                </ul>
                <ul class="shop_show" id="commendList_4" style="display:none">
                    <div style="width:750px;height:200px" class="loading_58_58"></div>
                </ul>
            </div>
            <div class="bottom"></div>
        </div>
    </div>
</fieldset>
<fieldset>
    <legend>Tab demo 3</legend>
    <dl id="tab2">
        <dt><span><b>1</b>美腿秘籍潮流冬靴疯狂搭配</span></dt>
        <dd style="display: none" ><a href="" ><img src="images/tab_3-1.jpg" alt="" /></a></dd>
        <dt ><span><b>2</b>人气内衣秋冬必备款,特价包邮!</span></dt>
        <dd style="display: none"><a href="" ><img src="images/tab_3-2.jpg" alt="" /></a></dd>
        <dt ><span><b>3</b>汽车用品及家用电器类低价风暴</span></dt>
        <dd style="display: none"><a href=""><img src="images/tab_3-3.jpg" alt="" /></a></dd>
        <dt ><span><b>4</b>全面斜纹四件套秒杀60疯抢</span></dt>
        <dd style="display: none"><a href="" ><img src="images/tab_3-4.jpg" alt="" /></a></dd>
        <dt ><span><b>5</b>不仅仅是麻辣！巴蜀美味特卖</span></dt>
        <dd style="display: none"><a href=""><img src="images/tab_3-2.jpg" alt="" /></a></dd>
    </dl>
</fieldset>

<!-- 独立版本 -->
<script src="../build/release/jwidget_1.0.0-min.js"></script>
<script type="text/javascript">
jWidget.ui.TabView("tab2",{"type":"list"});
jWidget.ui.TabView("theme", {panelWrapper : 'theme_panel', navWrapper : 'theme_nav'});	
jWidget.ui.TabView("sale", {panelWrapper : 'danpin1_panel', navWrapper : 'danpin1_nav', navClassOn:'tab_on'});
</script>

<!-- QZFL版本 -->
<!--
<script src="http://imgcache.qq.com/ac/qzone/qzfl/qzfl_2.0.6.1.js"></script>
<script src="../build/release/jwidget_qzfl_1.0.0-min.js"></script>
<script type="text/javascript">
QZFL.ui.TabView("tab2",{"type":"list"});
QZFL.ui.TabView("theme", {panelWrapper : 'theme_panel', navWrapper : 'theme_nav'});	
QZFL.ui.TabView("sale", {panelWrapper : 'danpin1_panel', navWrapper : 'danpin1_nav', navClassOn:'tab_on'});
</script>
-->
</body>
</html>
